<script setup>
import { reactive, ref } from "vue";
// 定义数组
const list = reactive([
    { id: 1, src: "/img/5.png", title: '迎新晚会现代舞' },
    { id: 2, src: "/img/7.png", title: '运动会' },
    { id: 3, src: "/img/1.jpg", title: '运动会全景' },
    { id: 4, src: "/img/6.png", title: '才艺展示' },
])
import MoreDemo from "../../components/icons/MoreDemo.vue"
import $ from "jquery"

// 手机端显示ul
$(function () {
    $(".image4").click(function () {
        var bElement = $(".ul-right");
        if (bElement.is(":visible")) {
            bElement.hide();
        } else {
            bElement.show();
        }
    });
});
// 获取导航列表
import { getNavList } from "@/api/list.js"
const nav1 = ref()
const navlist = async () => {
    const { data: { data } } = await getNavList()
    nav1.value = data
    // console.log(nav1.value[0].child);
    // console.log(nav1.value[0].child[0]);
    // console.log(nav1.value[0]);
}
// 获取轮播图列表
import { getBrList } from "@/api/list"
const banner = ref()
const brlist = async () => {
    const { data: { data } } = await getBrList()
    banner.value = data
    // console.log(banner);
}
// 获取新闻列表
import { getNewList } from "@/api/list.js"
const news = ref()
const newslist = async () => {
    const { data: { data: { list } } } = await getNewList()
    news.value = list
    // 手机切换
    $(function () {
        $(".news1:first").show().siblings(".news1").hide();
        var index = 0;
        $(".img-right").click(() => {
            index++;
            if (index < 3) {
                $(".news1").eq(index).show().siblings(".news1").hide();
            } else {
                index = -1;
            }
        });
        $(".img-left").click(() => {
            index--;
            if (index >= 0) {
                $(".news1").eq(index).show().siblings(".news1").hide();
            } else {
                index = 3;
            }
        });
    });
}
//调用
navlist()
brlist()
newslist()
</script>

<template>
    <div class="home">
        <!-- 头部导航 -->
        <div class="top">
            <img class="image2" src="/img/wx2.png" alt="">
            <img class="image1" src="/img/wx4.png" alt="">
            <img class="image4" src="/img/图片1.png" alt="">
            <ul class="ul-right">
                <li> <router-link to="/">首页</router-link></li>
                <li> <router-link to="/introductiondemo">院部简介</router-link> </li>
                <li class="li-top" v-for="item in nav1" :key="item.id"><a href="">
                        {{ item.title }}
                        <ul>
                            <li class="li-top1" v-for="item1 in item.child" :key="item1.id">{{ item1.title }}</li>
                        </ul>
                    </a></li>
                <li><a href="">专业介绍</a></li>
                <li><a href="">领导关怀</a></li>
                <li><a href="">对外交流</a></li>
                <li><a href="">社会服务</a></li>
                <li><a href="">师资力量</a></li>
                <!-- <li><a href="">实训中心</a></li>
                <li><a href="">实习基地</a></li> -->
            </ul>
        </div>
        <!-- 轮播图 -->
        <t-swiper class="tdesign-demo-block--swiper" :duration="300" :interval="2000">
            <t-swiper-item v-for="item in banner" :key="item.id">
                <div class="demo-item"><img :src="item.image" alt=""></div>
            </t-swiper-item>
        </t-swiper>
        <!-- 院部动态 -->
        <div class="Department">
            <MoreDemo title1="院部新闻"></MoreDemo>
            <!-- 中间 -->
            <div class="conter">
                <div class="news1" v-for="(item, index) in news" :key="item.id">
                    <div class="news-left">
                        <img class="image3" :src="item.image" alt="" />
                        <div class="p1">{{ item.title }}</div>
                    </div>
                    <div class="news-right">
                        <p>
                            {{ item.title }}
                        </p>
                        <div class="border"></div>
                        <p>{{ item.create_time }}</p>
                        <p>
                            {{ item.abstract }}
                        </p>
                        <div class="bottom">
                            <div>
                                <img class="img-left" src="/img/jiantou2.png" alt="" />
                                <img class="img-right" src="/img/jiantou2.png" alt="" />
                            </div>
                            <p><span>{{ index + 1 }}</span>/{{ news.length }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 下面 -->
            <div class="box-bottom">
                <div class="box-bottom1" v-for="item in 3" :key="item">
                    <p>传承八一精神 凝聚奋进力量|旅游与 服务系第一第二当支部开展主题.</p>
                    <p><img src="/img/时钟1.png" alt="">2022-11-02</p>
                </div>
            </div>
        </div>
        <!-- 当团建设 -->
        <div class="constr">
            <div class="construction">
                <MoreDemo class="demo1" title1="当团建设"></MoreDemo>
                <div class="left">
                    <div class="all-left" v-for="item in 4" :key="item">
                        <div class="left1">
                            <h1>28</h1>
                            <p>2019-01</p>
                        </div>
                        <div class="left2">中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训..</div>
                    </div>
                </div>
                <img class="img" src="/img/wx6.png" alt="">
                <MoreDemo class="demo1" title1="校企合作"></MoreDemo>
                <div class="right">
                    <div class="all-left" v-for="item in 4" :key="item">
                        <div class="left1">
                            <h1>28</h1>
                            <p>2019-01</p>
                        </div>
                        <div class="left2">中餐学院2022级新生军训圆满闭营,中餐学院2022级新生军训..</div>
                    </div>
                </div>

            </div>
        </div>
        <!-- 技能大赛 -->
        <div class="skills">
            <MoreDemo title1="技能大赛"></MoreDemo>
            <t-swiper class="tdesign-demo-block--swiper" type="card" :height="280">
                <t-swiper-item v-for="item in 6" :key="item">
                    <div class="demo-item"><img src="/img/6-min.png" alt=""></div>
                </t-swiper-item>
            </t-swiper>

            <div class="center">
                <div class="center1">
                    <img src="/img/3.png" alt="">
                </div>
                <div class="center2">
                    <div class="center-one" v-for="item in 3" :key="item">
                        <div class="center-top">
                            <p>2021-09-10</p>
                            <p>我院参加全省技工院校学生资助管理工...</p>
                            <img src="/img/4.png" alt="">
                        </div>
                        <img src="/img/学院3.png" alt="">
                    </div>

                </div>
                <div class="center3">
                    <img src="/img/3.png" alt="">
                </div>
            </div>
        </div>
        <!-- 教研成果 -->
        <div class="topic">
            <div class="news">
                <p class="color">
                    JIAO YAN CHENG GUO<span class="newcolor">教研成果</span>
                </p>
            </div>
            <div class="all">
                <div class="news-bottom">
                    <div class="center">
                        <div class="center-top">
                            <img src="/img/12-min.png" alt="" />
                            <p>山东城院"五心工程"<br>温暖校园</p>
                        </div>
                        <div class="center-bottom">
                            <p>3月24日,一场别开生面的平台通过网络直播的形式拉开帷幕...</p>
                            <p class="p2"><img src="/img/时钟.png" alt="">2022-11-04</p>
                        </div>
                    </div>
                    <div class="center" v-for="item in 3" :key="item">
                        <div class="center-top">
                            <img src="/img/13-min.png" alt="" />
                            <p>划重点!一图读懂山东城院“十四五”发 展规划</p>
                        </div>
                        <div class="center-bottom">
                            <p>
                                3月20日下午,烟台市高新区管委副主任李如鹏、市教育局高新区分局..
                            </p>
                            <p class="p2"><img src="/img/时钟.png" alt="">2022-11-04</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 学生动态 -->
        <div class="dynamics">
            <MoreDemo title1="学生动态"></MoreDemo>
            <div class="dynamics-all">
                <div class="dynamics-left">
                    <img src="/img/2.jpg" alt="">
                    <div class="top1">
                        <h1>迎新晚会·独唱</h1>
                        <p>更多+</p>
                    </div>

                </div>
                <div class="dynamics-right">
                    <div class="dynamics-four" v-for="item in list" :key="item.id">
                        <img :src="item.src" alt="">
                        <p>{{ item.title }}</p>
                    </div>

                </div>

            </div>
            <div class="dynamics-bottom">
                <h3>友情链接</h3>
                <ul>
                    <li>中华人民共和国教育部</li>
                    <li>山东教育厅</li>
                    <li>山东省科学技术厅</li>
                    <li>中国高职专教育网</li>
                    <li>山东省科学技术厅</li>
                    <li>中国高职专教育网</li>
                </ul>
            </div>

        </div>
        <!-- 底部 -->
        <div class="foot">
            <div class="foot-one">
                <img src="/img/wx2.png" alt="">
                <img src="/img/wx4.png" alt="">
            </div>
            <div class="foot-top">
                <div class="left">
                    <ul>
                        <li>联系我们</li>
                        <li>办公室:0535-2246666</li>
                        <li>招生咨询:0535-2246625</li>
                        <li>官网:www.sdcc.edu.cn</li>
                        <li>邮箱:sdccxy@126.com</li>
                        <li>校 址:山东省烟台市高新区海天路1001号</li>
                    </ul>
                </div>
                <div class="center"><img src="/img/wx2.png" alt=""></div>
                <div class="right">
                    <img src="/img/微信.png" alt="">
                    <img src="/img/微博.png" alt="">
                    <img class="code" src="/img/收款码.jpg" alt="">
                </div>
            </div>
            <div class="foot-bottom">
                <p>Copyright @山东省城市服务技师学院版权所有</p>
            </div>
        </div>
    </div>

</template>
<style scoped lang="scss">
@import "/src/assets/home/homepc.scss";
@import "/src/assets/home/sjhome.scss";

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
</style>